// 短视频播放
document.querySelector('.video ul').onclick = function() {
    document.body.style.overflow = 'hidden'
    document.querySelector('.video-wrapper').style.display = 'block'
}
document.querySelector('.video-wrapper .close').onclick = function() {
    document.body.style.overflow = 'auto'
    document.querySelector('.video-wrapper').style.display = 'none'

    document.querySelector('.video-wrapper video').pause()
}
//确定每个图片的左边和上面的距离
//找出一列中高度最小的  ：top+自身的offsetHeight
let cols = [
    { left: 0, top: 0 },
    { left: 254, top: 0 },
    { left: 2 * 254, top: 0 },
    { left: 3 * 254, top: 0 }
]
//在第二张图片的时候
//数组
// let cols = [
//     { left: 0, top: 422},
//     { left: 254, top: 422},
//     { left: 2 * 254, top: 0 },
//     { left: 3 * 254, top: 0 }
// ]
//比较过后，第二个对象时最小的 ，把此时的left值赋值给第二张图片的left值
// let cols = [
//     { left: 0, top: 422},
//     { left: 254, top: 422 },
//     { left: 2 * 254, top: 422 },
//     { left: 3 * 254, top: 0 }
// ]
//在第三张图片的时候
//数组

let videoHeight = 0


function Waterfall() {
    //循环打印56张图片
    //循环追加到ul中去
    for (let num = 1; num <=56; num++) {
        let liObj = document.createElement('li')
        liObj.style.position = 'absolute'
        liObj.style.display = 'none'
        liObj.innerHTML = `
  
        <div>
           <img src="./imgs2/${num}.jpg" alt="">
        </div>
        <span>初秋絮语，用音乐记下你的点点滴滴</span>
        <p>
            <i class="iconfont icon-aixin"></i>20.6w喜欢
        </p>
    `
        // liObj.style.position = 'absolute'
        // liObj.style.display = 'none'
        document.querySelector('.video ul').appendChild(liObj)


        //要等页面都加载完毕后，才能确定图片的大小
        liObj.querySelector('img').onload = function () {
            let minHeightIndex = 0
            //遍历cols，找出最小高度
            cols.forEach((item, i) => { 
                if (cols[minHeightIndex].top > item.top) {
                    minHeightIndex = i
                }
            })
            console.log(minHeightIndex);
            // console.log(cols);
            

            liObj.style.display = 'block'
            //把此时top值最小的那个，对应的left值给此时的这个li
            liObj.style.left = cols[minHeightIndex].left + 'px'
        
            liObj.style.top = cols[minHeightIndex].top + 'px'
            cols[minHeightIndex].top += liObj.offsetHeight
            
            console.log(cols);
            //记录最后一个图片的top位置
            videoHeight = cols[minHeightIndex].top
        }
    }
}


//无限滚动
// 监控滚动条变化
// 事件处理函数中 --获取默认可见视口高度+滚动条滚动高度
// 事件处理函数中 -- 判断    2  最后一个图片的top  旧的重新生成追加图片
window.onscroll =function(){
   let clientHeight = window.innerHeight || document.documentElement.clientHeight
   let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop

   if(clientHeight + scrollHeight >= videoHeight){
       console.log(`%c 第${document.querySelectorAll('.video li').length/56}次追加`, 'color:red;font-size:25px;');
       console.log(`%c 第${document.querySelectorAll('.video li').length/56}次追加`, 'color:red;font-size:25px;');
       
       Waterfall()
   }
}
window.addEventListener('load', Waterfall)